import React, { useEffect, useState, useRef } from 'react'
import { List, Avatar, Image, message, Button, Tooltip, Modal, Input, Drawer, Table, Tag, Space } from 'antd';
import axios from 'axios';
import { QuestionCircleTwoTone } from '@ant-design/icons';
import MySpan from '../../../components/MySpan'
import { useNavigate } from 'react-router-dom'
import moment from 'moment'
import 'moment/locale/zh-cn';
const loginUser = JSON.parse(localStorage.getItem("loginUser"));
export default function Index() {
  const [listData, setListData] = useState([]);
  const [checkData, setCheckData] = useState([]);
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [drawerVisible2, setDrawerVisible2] = useState(false);
  const [cancelModal, setCancelModal] = useState(false);
  const [cancelChangeApplyid, setCancelChangeApplyid] = useState();
  const [writeModal, setWriteModal] = useState(false)
  const [applyerexpressinfo, setApplyerexpressinfo] = useState();  //保存 applyerexpressinfo信息
  const myExpressId = useRef();
  useEffect(() => {
    axios.get("http://localhost:8080/allChangeHistory").then(resp => {
      setListData(resp.data.data);
      console.log(resp);
    })
    return () => {
    };
  }, []);
  const cancelChangeApply = () => {
    axios.post("http://localhost:8080/cancelMyChangeApply?changeApplyId=" + cancelChangeApplyid).then(resp => {
      console.log(resp);
      if (resp.data.state === "0") {
        message.success(resp.data.message, 1)
        setCancelModal(false)
        setTimeout(() => {
          window.location.reload()
        }, 800);
      } else {
        message.error(resp.data.message, 1)
        setCancelModal(false)
      }
    }).catch(err => {
      message.error("网络异常!", 1)
      setCancelModal(false)
    })
  }
  const showCancelModal = (id) => {
    console.log("要取消的chanapply的id是", id);
    setCancelModal(true)
    setCancelChangeApplyid(id);

  }
  const showWriteModal = (record) => { //填写物流订单modal
    setWriteModal(true)
    setApplyerexpressinfo(record)
  }
  const writeModalOK = () => {
    //填写我的物流单号
    let rs = applyerexpressinfo;
    rs.applyerexpressid = myExpressId.current.state.value
    setApplyerexpressinfo(rs)
    console.log(applyerexpressinfo); //saveapplyerexpressINFO
    axios.post("http://localhost:8080/saveapplyerexpressid", applyerexpressinfo).then(resp => {
      console.log(resp);
      if (resp.data.state === "0") {
        message.success(resp.data.message, 1)
        setWriteModal(false);
        setTimeout(() => {
          window.location.reload()
        }, 800);
      } else {
        message.error(resp.data.message, 1)
        setWriteModal(false);
        setTimeout(() => {
          window.location.reload()
        }, 800);
      }
    }).catch(err => {
      message.error("网络异常!", 1);
      setWriteModal(false);
      setTimeout(() => {
        window.location.reload()
      }, 800);
    })

  }
  const columns = [
    {
      title: <Tooltip title="点击查看物品详细信息">申请者 <QuestionCircleTwoTone /></Tooltip>,
      key: 'applyernickname',
      render: (text, record) => (
          <MySpan title={record.applyernickname} onClick={() => { drawerOpen(record) }}/>
      ),
    },
    {
      title: <Tooltip title="点击查看物品详细信息">被申请者 <QuestionCircleTwoTone /></Tooltip>,
      key: 'respondernickname',
      render: (text, record) => (
          <MySpan title={record.respondernickname} onClick={() => {drawerOpen2(record) }}/>
      ),
    },
    {
      title: '状态',
      key: 'changetype',
      width:'8%',
      filters: [
        {
          text: '待同意',
          value: 0,
        },
        {
          text: '已同意',
          value: 1,
        },
        {
            text: '已拒绝',
            value: 2,
          }
    ],
      render: (text, record) => (
        <Space size="middle">
          {

            record.changetype == 0 ?
              <Tag color="lime">等待双方同意</Tag> :
              record.changetype == 1 ?
                <Tag color="green">已同意</Tag> :
                <Tag color="#f50">已拒绝</Tag>
          }
        </Space>
      ),
      onFilter: (value, record) => record.changetype === value,
    },
    {
        title: '申请者快递信息',
        key: 'expressinfo',
        render: (text, record) => (
          <Space size="middle" key="useraction">
            {
              record.changetype == "1" ?
                <>
                  <Tag color="blue">{record.applyerexpressid==null||record.applyerexpressid==''?"TA还未填写快递单号":record.applyerexpressid}</Tag>
                </> :""
            }
          </Space >
        ),
      },
    {
      title: '被申请者快递信息',
      key: 'expressinfo',
      render: (text, record) => (
        <Space size="middle" key="useraction">
          {
            record.changetype == "1" ?
              <>
                <Tag color="blue">{record.responderexpressid==null||record.responderexpressid==""?"TA还未填写快递单号":record.responderexpressid}</Tag>
              </>  :""
          }
        </Space >
      ),
    },
   
    {
      title: '交换时间',
      key: 'createtime',
      sorter: (a, b) => a.createtime - b.createtime,
      render: (text, record) => (
        <span>{ moment(Number(record.createtime)).format('YYYY-MM-DD HH:mm:ss')}</span>
      ),
    },
    
  ];
  const drawerOpen = (record) => {
    axios.get("http://localhost:8080/getChaneInfoById?id=" + record.applychangeinfoid).then(resp => {
      console.log("GETCHANGEINFOBYID:", resp.data);
      setCheckData([resp.data.data]);
      setDrawerVisible(true)
    })
  }
  const drawerOpen2 = (record) => {
    axios.get("http://localhost:8080/getChaneInfoById?id=" + record.respondentchangeinfoid).then(resp => {
      console.log("GETCHANGEINFOBYID:", resp.data);
      setCheckData([resp.data.data]);
      setDrawerVisible2(true)
    })
  }
  return (
    <div sylte={{ displayl: 'flex' }}>
      <Table dataSource={listData} columns={columns} />

      <Drawer
        title="申请者物品"
        placement='bottom'
        width={500}
        onClose={() => { setDrawerVisible(false) }}
        visible={drawerVisible}
      >
        <List
          itemLayout="vertical"
          size="large"
          dataSource={checkData}

          renderItem={item => (
            <List.Item
              key={item.id}
              extra={
                <Space direction="vertical">
                  <Image
                    width={135}
                    src={`http://localhost:8080/getChangeInfoPhoto?id=${item.id}`}
                  />
                </Space>
              }
            >
              <List.Item.Meta
                avatar={<Avatar src={`http://localhost:8080/getUserHead?id=${item.createrid}`} />}
                title={loginUser.nickname}
                description={`标题:${item.title}`}
              />
              {item.message}
            </List.Item>
          )}

        />
      </Drawer>

      <Drawer
        title="被申请者物品"
        placement='bottom'
        width={500}
        onClose={() => { setDrawerVisible2(false) }}
        visible={drawerVisible2}
      >
        <List
          itemLayout="vertical"
          size="large"
          dataSource={checkData}
          renderItem={item => (
            <List.Item
              key={item.id}
              extra={
                <Space direction="vertical">
                  <Image
                    width={135}
                    src={`http://localhost:8080/getChangeInfoPhoto?id=${item.id}`}
                  />
                </Space>
              }
            >
              <List.Item.Meta
                avatar={<Avatar src={`http://localhost:8080/getUserHead?id=${item.createrid}`} />}
                title={`${item.nickname}(${item.city})`}
                description={item.title}
              />
              {item.message}
            </List.Item>
          )}

        />
      </Drawer>

    </div>
  )
}
